<template>
    <div>
        <Title>{{ route.params.name }}的个人中心</Title>
        <NuxtLayout name="common">
            <div class="box mt-[30px]">
                <t-card title="零售订单" :bordered="false">
                    <span v-if="isOrderInfo">
                        <t-list>
                            <t-list-item v-for="item in orderInfoList">
                                <t-list-item-meta :title="item.goods_title"
                                    :description="`数量：${item.goods_number} -------------------- 尺寸：${item.goods_size}`" />
                            </t-list-item>
                        </t-list>
                        <span class="text-lg block font-[600]">物流状态</span>
                        <span v-if="expressInfo.data.express_number === ''">暂未发货</span>
                        <span v-else>
                            <span class="block">物流单号：{{ expressInfo.data.express_number }}</span>
                            <span class="block">物流出库时间：{{ expressInfo.data.out_time }}</span>
                        </span>
                    </span>
                    <span v-else>
                        您暂无零售订单
                    </span>
                </t-card>
            </div>
            <div class="box mt-[30px]">
                <t-card title="预售订单" :bordered="false">
                    <span v-if="isAllOrderInfo">
                        <t-list>
                            <t-list-item v-for="item in orderInfoLists">
                                <t-list-item-meta :title="item.goods_title"
                                    :description="`数量：${item.number}--------------${item.express_number === '' ? '暂未发货' : item.express_number}`" />
                            </t-list-item>
                        </t-list>
                    </span>
                    <span v-else>
                        您暂无预售订单
                    </span>
                </t-card>
            </div>
        </NuxtLayout>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';

// 使用路由
const route = useRoute();


// 是否有零售订单状态
const isOrderInfo = ref(false);
// 是否有预售订单
const isAllOrderInfo = ref(false);

// 零售订单明细
const orderInfoList = ref([]);

// 物流明细
const expressInfo = reactive({
    data: {
        express_number: '',
        out_number: '',
        out_time: ''
    }
});

// 预售订单列表
const orderInfoLists = ref([]);

const __initiaze = () => {
    // 获取本地是否有零售订单
    let orderTable = localStorage.getItem('orderTable') || '[]';
    orderTable = JSON.parse(orderTable);


    // 匹配是否有该用户订单
    orderTable.forEach(item => {
        if (item.content.username === route.params.name) { // 该用户存在订单
            orderInfoList.value = item.goods_list
            expressInfo.data = item.out_warehouse
            isOrderInfo.value = true
        }
    });


    // 获取本地预售订单
    let orderTables = localStorage.getItem('orderTables') || [];
    orderTables = JSON.parse(orderTables);
    orderTables.forEach(item => {
        if (item.user.username === route.params.name) {
            orderInfoLists.value = item.goods_list
            isAllOrderInfo.value = true
        }
    })
}

onMounted(() => {
    setInterval(() => {
        __initiaze();
    }, 5000)
})
</script>

<style scoped></style>